<!DOCTYPE html>
<html data-th-replace="~{layout :: layout(~{::head/content()}, 'team', ~{::div})}">
<head>
    <title>Spring | Team</title>
    <meta property='og:title' content='Meet the Spring team'/>
    <meta property='og:description' content='Learn more about members of the Spring team.'/>
    <link rel="stylesheet" type="text/css" media="all" data-th-href="@{/css/team.css}" />
    <script data-th-inline="javascript">
        /*<![CDATA[*/
        var teamLocations = /*[[${teamLocations}]]*/ [{id: '123', latitude: 30.0, longitude: 1.5}];
        /*]]>*/
    </script>
    <script data-th-src="@{/js/team.js}"></script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOVeQZLTLC5_RxhGtRXOV8xqQQQcP8b9Q&callback=initMap"></script>
</head>
<body>
<div>
    <div class="container-fluid"></div>
    <div>
        <div class="billboard--wrapper js-team-map--wrapper">
            <div class="billboard--container center-text js-team-map--container">
                <div class="container-fluid">
                    <h1 class="billboard--title">The Spring Team</h1>
                </div>
            </div>
            <figure class="billboard-bg" id="map"></figure>
        </div>
    </div>
    <div class="main-body--wrapper">
        <div class="team-members--wrapper">
            <section class="team-member--container" data-th-each="profile : ${profiles}" data:member-id="${profile.id}">
                <a data-th-href="@{'/team/' + ${profile.username}}" class="team-member--avatar">
                    <img data-th-src="${profile.avatarUrl} + '?s=153&s=153'"/>
                </a>
                <div class="team-member--info">
                    <a data-th-href="@{'/team/' + ${profile.username}}" class="team-member--name" data-th-text="${profile.name}">Member
                        Name</a>
                    <div class="team-member--bio">
                        <p class="team-member--position" data-th-text="${profile.jobTitle}">Spring team member</p>
                        <p class="team-member--location" data-th-text="${profile.location}">Some-hometown</p>
                    </div>
                    <div class="team-member--social">
                        <a class="team-member--social--icon twitter-small" rel="me"
                           data-th-href="${profile.twitterLink.href}" data-th-if="${profile.hasTwitterUsername()}">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a class="team-member--social--icon github-small" rel="me" data-th-href="${profile.githubLink.href}"
                           data-th-if="${profile.hasGithubUsername()}">
                            <i class="fab fa-github"></i>
                        </a>
                        <a class="team-member--social--icon speakerdeck-small" rel="me"
                           data-th-href="${profile.speakerdeckLink.href}" data-th-if="${profile.hasSpeakerdeckUsername()}">
                            <i class="fab fa-speaker-deck"></i>
                        </a>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
</body>
</html>
